<template>
  <div>
    <a-form ref="queryLogininforFormRef" name="queryLogininforForm" :model="queryLogininforForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
      <a-row :gutter="24">
        <a-col span="8">
          <a-form-item name="userName" label="用户账号">
            <a-input v-model:value="queryLogininforForm.data.userName" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="ipaddr" label="登录IP地址">
            <a-input v-model:value="queryLogininforForm.data.ipaddr" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="status" label="登录状态">
            <a-select v-model:value="queryLogininforForm.data.status" :options="pageData.sysCommonStatusDict" allowClear> </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item name="loginTime" label="访问时间起期">
            <a-date-picker v-model:value="queryLogininforForm.data.params.beginTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item name="loginTime" label="访问时间止期">
            <a-date-picker v-model:value="queryLogininforForm.data.params.endTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="12" style="text-align: left">
          <!-- <a-button type="primary" @click="openLogininforAddModal()" v-hasPermi="['monitor:logininfor:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button> -->
          <a-button type="primary" danger @click="clickDeleteLogininfor()" :disabled="logininforTableData.selectedRowKeys.length <= 0" v-hasPermi="['monitor:logininfor:remove']"
            ><AutoeeIcon icon="delete-outlined" />删除</a-button
          >
          <a-button type="primary" danger @click="clickCleanOperlog()" v-hasPermi="['monitor:logininfor:remove']"><AutoeeIcon icon="delete-outlined" />清空</a-button>
          <a-button type="primary" @click="clickExport()" v-hasPermi="['monitor:logininfor:export']"><AutoeeIcon icon="export-outlined" />导出</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="logininforTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetLogininforQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="infoId"
      :columns="logininforTableData.columns"
      :data-source="logininforTableData.dataSource"
      :loading="logininforTablePage.loading.value"
      :pagination="logininforTablePagination"
      @change="logininforTableHandChangePage"
      :row-selection="{ selectedRowKeys: logininforTableData.selectedRowKeys, onChange: onLogininforTableSelectChange }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.sysCommonStatusDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'logininforTableOperateCol'">
          <span>
            <a @click="openLogininforDetailModal(record)"> 查看 </a>
            <!-- <a-divider type="vertical" v-hasPermi="['monitor:logininfor:edit']" />
            <a @click="openLogininforUpdateModal(record)" v-hasPermi="['monitor:logininfor:edit']"> 修改 </a> -->
          </span>
        </template>
      </template>
    </a-table>

    <!-- <LogininforAddUpdateModal ref="logininforAddUpdateModalRef"
        :sysCommonStatusDict="pageData.sysCommonStatusDict"
    /> -->
    <LogininforDetailModal ref="logininforDetailModalRef" :sysCommonStatusDict="pageData.sysCommonStatusDict" />
  </div>
</template>

<script setup name="Logininfor">
import { list, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor';
// import LogininforAddUpdateModal from './addUpdateModal.vue';
import LogininforDetailModal from './detailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';

// 当前页面使用的数据
const pageData = reactive({
  sysCommonStatusDict: [],
});

AutoeeUtil.getDictsByType('sys_common_status').then((res) => {
  pageData.sysCommonStatusDict = res;
});

// 查询Form
const queryLogininforFormRef = ref();
const queryLogininforForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetLogininforQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryLogininforForm.data);
  logininforTablePage.reload();
};

// // 打开新增窗口
// const logininforAddUpdateModalRef = ref();
// const openLogininforAddModal = () => {
//   logininforAddUpdateModalRef.value.openAddModal(logininforTablePage);
// };

// // 打开修改窗口
// const openLogininforUpdateModal = (record) => {
//   logininforAddUpdateModalRef.value.openUpdateModal(record, logininforTablePage);
// };

// 打开详细窗口
const logininforDetailModalRef = ref();
const openLogininforDetailModal = (record) => {
  logininforDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeleteLogininfor = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delLogininfor(logininforTableData.selectedRowKeys).then((res) => {
      logininforTableData.selectedRowKeys = [];
      AutoeeUtil.messageSuccess('删除操作成功。');
      logininforTablePage.reload();
    });
  });
};

// 点击清空
const clickCleanOperlog = () => {
  AutoeeUtil.confirmCleanAllData(() => {
    cleanLogininfor().then((res) => {
      AutoeeUtil.messageSuccess('清空操作成功。');
      logininforTablePage.reload();
    });
  });
};

// 点击导出
const clickExport = () => {
  AutoeeUtil.download('monitor/logininfor/export', queryLogininforForm.data);
};

// 列表数据
const logininforTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    {
      title: '序号',
      dataIndex: 'pageIndex',
      key: 'pageIndex',
      width: 50,
      align: 'center',
    },
    {
      title: '用户账号',
      key: 'userName',
      dataIndex: 'userName',
    },
    {
      title: '登录IP地址',
      key: 'ipaddr',
      dataIndex: 'ipaddr',
    },
    {
      title: '登录地点',
      key: 'loginLocation',
      dataIndex: 'loginLocation',
    },
    {
      title: '浏览器类型',
      key: 'browser',
      dataIndex: 'browser',
    },
    {
      title: '操作系统',
      key: 'os',
      dataIndex: 'os',
    },
    {
      title: '登录状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '提示消息',
      key: 'msg',
      dataIndex: 'msg',
    },
    {
      title: '访问时间',
      key: 'loginTime',
      dataIndex: 'loginTime',
    },
    {
      title: '操作',
      key: 'logininforTableOperateCol',
      width: 100,
    },
  ],
});

// 查询用户列表
const queryLogininforList = () => {
  return list(queryLogininforForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const logininforTablePage = AutoeeUtil.usePagination(queryLogininforList, logininforTableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const logininforTablePagination = computed(() => AutoeeUtil.getTablePagination(logininforTablePage));

// 手动翻页方法
const logininforTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(logininforTablePage, page, filters, sorter);
};

// 列表选中方法
const onLogininforTableSelectChange = (selectedRowKeys, selectedRows) => {
  logininforTableData.selectedRowKeys = selectedRowKeys;
  // console.log('selectedRows[0].dictType=' + JSON.stringify(selectedRows[0].dictType));
};
</script>
<style lang="less"></style>
